<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/user_iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/amazeui.min.css">
    <link rel="stylesheet" type="text/css" href="css/appuser.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/amazeui.min.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/validform/Validform_v5.3.2_min.js"></script>
    <style>
        html, body {
            background: url("img/login_bg.png") no-repeat;
            background-size: cover;
        }
    </style>


</head>
<body>

<div class="am-text-center logo"><a href="/"><img src="http://sl518.com/images/sl/logo_hei.png"/></a></div>
<div class="am-text-right am-margin-horizontal am-text-sm tips_login">已有账号？快去<a href="login.html">登录</a>吧！</div>
<div class="am-padding-horizontal m_form">
    <form id="register">
        <ul class="am-list am-list-static member_data">
            <!--<li>-->
            <!--<b class="iconfont icon-yonghu1 am-margin-right"></b>-->
            <!--<input class="text" type="text" name="name" placeholder="真实姓名" datatype="zh2-6" errormsg="姓名格式不正确" nullmsg="请输入真实姓名"/>-->
            <!--</li>-->
            <li>
                <b class="iconfont icon-iconfont am-margin-right"></b>
                <input class="text" id="phone" type="text" name="phone" placeholder="手机号码" datatype="n11-11"
                       nullmsg="手机号码！"/>
            </li>
            <li>
                <b class="iconfont icon-mima1 am-margin-right"></b>
                <input id="code" class="text" name="code" type="text" style="width: 110px;" placeholder="短信验证码"
                       datatype="n6-6" nullmsg="请输入验证码！" errormsg="验证码格式不正确！"/>
                <input id="sendsms" value="点击发送" type="button"
                       style="font-size: 1.4rem;display:inline-block;width: 110px;text-align: right;margin-top: -2px;color: #fff;background-color:transparent;border:none;float: right;line-height: 30px;"/>
            </li>
            <li>
                <b class="iconfont icon-mima am-margin-right"></b>
                <input class="text" type="password" name="password1" placeholder="输入密码" datatype="*4-25"
                       nullmsg="密码范围在4~25位之间！"/>
            </li>
            <li>
                <b class="iconfont icon-mima am-margin-right"></b>
                <input class="text" type="password" name="password2" placeholder="确认密码" datatype="*" recheck="password1"
                       nullmsg="请确认密码！" errormsg="您两次输入的密码不一致！"/>
            </li>
        </ul>
        <label class="agreement" data="0">
            <i class="iconfont icon-fuxuankuang"></i>
            我已接受泸州市胜蓝职业学校对此账号的所有管理协议
        </label>
        <button type="submit" id="registerbtn" class="am-btn-success" style="width: 100%;">立即注册</button>
    </form>
</div>

</body>


<script>
    wait = 60;
    var layer;
    layui.use(['layer', 'form'], function () {
        layer = layui.layer;
    });
    $(function () {
        $(".agreement").click(function () {
            $(this).find(".iconfont").toggleClass("icon-fuxuankuangxuanzhong");
            var rel = $('.agreement').attr("data");
            if (rel == '1') {
                $('.agreement').attr("data", "0");
            } else {
                $('.agreement').attr("data", "1");
            }
        });
        $("#register").Validform({
            btnSubmit: "#registerbtn",
            ajaxPost: true,
            postonce: true,
            datatype: {
                "zh2-6": /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,6}$/
            },
            tiptype: function (msg, o, cssctl) {
                if (!o.obj.is("form")) {
                    if (o.type == 3) {
                        layer.msg(msg, {shift: 6});
                    }
                    if (o.type == 4) {
                        layer.msg(msg, {shift: 6});
                    }
                }
            },
            beforeSubmit: function (curform) {
                var agreenMent = $(".agreement").attr("data");
                if (agreenMent != '1') {
                    layer.msg("请先同意用户条款!");
                    return false;
                }
                index = layer.load(0, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            },
            callback: function (data) {
                if (data.error === 0) {
                    layer.close(index);
                    if (data.msg == "wx") {
                        layer.msg('注册成功!<script>setTimeout("window.location.href=\'/index/login.html\';",600);<\/script>', {
                            icon: 6,
                            time: 1000
                        });
                    }
                    layer.msg('注册成功!<script>setTimeout("window.location.href=\'/index/login.html\';",600);<\/script>', {
                        icon: 6,
                        time: 1000
                    });
                } else {
                    layer.close(index);
                    layer.msg(data.msg);
                }
            }
        });
        $("#sendsms").click(function () {
            var obj = this;
            var phone = $("#phone").val();
            if (phone == "") {
                $("#phone").focus();
                layer.msg("请输入手机号！");
                return false;
            }
            if (phone.length == 11 || /^1[3|4|5|7|8][0-9]\d{4,8}$/.test(phone)) {
                $.ajax({
                    type: "post",
                    url: "/Check/sendsms",
                    data: {phone: phone, type: 1},//表单数据
                    success: function (d) {
                        layer.close(index);
                        if (d === 1) {
                            layer.msg("发送成功！");
                            time(obj);
                        } else {
                            layer.msg(d);
                        }
                    }, beforeSend: function () {
                        index = layer.load(0, {shade: [0.1, '#ccc']});
                        $(this).css("color", "#fff");
                        $(this).css("background-color", "#999");
                        $(this).css("border-color", "#999");
                        $(this).css("cursor", "default");
                    }
                });
            } else {
                layer.msg("手机号格式错误！");
            }
        });
    });

    function time(t) {
        if (wait == 0) {
            t.removeAttribute("disabled");
            t.value = "获取验证码";
            t.style.color = "#4bc15a";
            t.style.backgroundColor = "#fff";
            t.style.borderColor = "#4bc15a";
            t.style.cursor = "pointer";
            t.onmouseover = function () {
                t.style.color = '#fff';
                t.style.backgroundColor = '#4bc15a';
            };
            t.onmouseout = function () {
                t.style.color = '#4bc15a';
                t.style.backgroundColor = '#fff';
            };
            wait = 60;
            return;
        } else {
            t.setAttribute("disabled", true);
            t.value = "重新发送(" + wait + ")";
            wait--;
            setTimeout(function () {
                    time(t)
                },
                1000)
        }
        ;
    }
</script>


</html>